<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>友情链接</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/css/gobal.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../css/common.css" media="all">
    <style type="text/css">
        .cms-search-input{padding-right: 15px;}
        .layui-input-inline{margin-right: 5px;}
        .layui-inline{margin-right: 5px;}
        .flinkTable{padding-top: 0px;}
    </style>
</head>
<body>
<div class="layui-fluid cms-wrapper">
    <blockquote class="layui-elem-quote cms-btn">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="search" value="" id="search_input" placeholder="请输入网站名称进行查询" class="layui-input cms-search-input">
            </div>
            <a class="layui-btn search_btn" data-type="getSelect">查询</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-bg-pale" data-type="addLink">添加链接</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger" data-type="delLink">批量删除</a>
        </div>
        <div class="layui-inline">
            <div class="layui-form-mid layui-word-aux">因时间仓促，本页面仅为静态示例页面，无后台服务端交互场景演示</div>
        </div>
    </blockquote>
    <div class="flinkTable">
        <table class="layui-table" id="flinklist" lay-filter="flinkTables"></table>
    </div>
</div>
<script type="text/html" id="flinkbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="linkTpl">
    {{#  if(d.alink === undefined){ }}
    未知
    {{#  } else { }}
    <a href="{{d.alink}}" class="layui-table-link" target="_blank">{{d.alink}}</a>
    {{#  } }}
</script>
<!-- 加载js文件 -->
<script type="text/javascript" src="../../common/layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'form', 'table', 'common'], function() {
        var $      = layui.$,
            layer  = layui.layer,
            form   = layui.form,
            table  = layui.table,
            common = layui.common;

        var tableIns = table.render({
            elem: '#flinklist',
            cols: [
                [
                    {checkbox : true,width : 60,fixed : true},
                    {field : 'id',width : 80,title : 'ID',sort : true,align : 'center'},
                    {field : 'webname',minwidth : 150,title : '网站名称',align : 'center'},
                    {field : 'alink',minwidth : 250,title : '链接地址',align :'center',templet : '#linkTpl'},
                    {field : 'email',title : '站长邮箱',align : 'center',width : 200},
                    {field : 'addtime',title : '添加时间',align : 'center',width : 130},
                    {field : 'dispos',title : '展示位置',align : 'center',width : 100},
                    {title : '操作',width : 200,align : 'center',toolbar : '#flinkbar',fixed : 'right'}
                ]
            ],
            url  : '../../datas/flink.json',
            page : true,
            even : true
        });
        // 监听工具条
        table.on('tool(flinkTables)', function(obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data))
            }
        });
        var active = {
            getSelect:function(){
                if($('#search_input').val()){
                    var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
                    setTimeout(function(){
                        common.larryCmsSuccess('未查询到指定对象( 哈哈！这里是静态演示页，未使用本地存储和sessionStorage存储数据，露个脸我准备开始闪啦...！ )','查询结果提示！',10);
                        layer.close(index);
                    },500);
                }else{
                    layer.tips('建议还是请输入点什么再搜索吧！比如网站名称、展示位置', $('#search_input'), {
                        tips: [3, '#5FB878']
                    });
                }
            },
            addLink: function() {
                var index = layer.open({
                    title   : "友情链接添加",
                    type    : 2,
                    skin    :'cms-green',
                    offset  : 'auto',
                    area    : ['540px', '450px'],
                    content : "flinkadd.html",
                });
            },
            delLink:function(){
                common.larryCmsError('数据批量删除失败！',common.cmsCore.errorTit,10);
            }
        };
        $('.cms-btn a.layui-btn').on('click',function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // 表格自适应解决
//        $(window).on('resize',function(){
//            var tableHeaderW = $('.layui-table-header').outerWidth();
//            var allSetW      = 0;
//            var numN         = 0
//            var divstyle     = new Array();
//            $('.layui-table-view .layui-table-header').find('th').each(function(k,o){
//                if($(this).children('.layui-table-cell').outerWidth() !=50){
//                 	allSetW += $(this).children('.layui-table-cell').outerWidth();
//                }else{
//                 	numN++;
//                    divstyle.push($(this).children('div').attr('class'));
//                }
//            });
//            console.log(tableHeaderW);
//            console.log(allSetW);
//            console.log(divstyle);
//            var numN_w = (numN)*50;
//            if(tableHeaderW>(allSetW+numN_w)){
//           	    var avgW = (tableHeaderW-allSetW-50)/(numN);
//                for(var i in divstyle){
//               	    var cssName = divstyle[i].split("layui-table-cell ")[1];
//               	    $('.layui-table-view .layui-table-header th .'+cssName).css({
//               	        "width":avgW,
//               	    });
//
//               	    var pos = cssName.split("layui-table-cell laytable-cell-1-");
//
//                }
//
//            }else{}
//        }).resize();
    });
</script>
</body>
</html>